<template>
  <div class="cate">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button type="primary" plain @click="cateBtn">添加用户</el-button>
    <tree-grid
      class="mt-15"
      :treeStructure="true"
      :columns="columns"
      :data-source="dataSource"
      @deleteCate="deleteCategory"
      @editCate="editCategory"
    ></tree-grid>
    <!-- 添加用户弹框 -->
    <div class="addusers">
      <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
        <el-form :model="addForm" :rules="fromRules" ref="addRef">
          <el-form-item label="分类名称：" label-width="120px" prop="cat_name">
            <el-input v-model="addForm.cat_name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="分类名称：" label-width="120px">
            <el-cascader
              change-on-select
              :options="options"
              label="父类名称"
              :props="defaultProps"
              v-model="selectedOptions"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addCate">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 编辑用户弹框 -->
    <div class="editusers">
      <el-dialog title="编辑分类" :visible.sync="editdialogFormVisible">
        <el-form :model="editrow" :rules="fromRules" ref="editRef">
          <el-form-item label="分类名称" label-width="120px">
            <el-input v-model="editrow.cat_name" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="editdialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="uploadEdit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 分页 -->
    <el-pagination
      class="page mt-15"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalNum"
    ></el-pagination>
  </div>
</template>
<script>
import { cateList, addCateList, delCate, idSearch, uploadEditKind } from '@/api'
import TreeGrid from '@/components/TreeGrid/TreeGrid'
export default {
  created () {
    this.initList()
  },
  components: {
    TreeGrid
  },
  data () {
    return {
      dataSource: [],
      type: 3,
      pagenum: 1,
      pagesize: 10,
      currentPage: 1,
      totalNum: 0,
      dialogFormVisible: false,
      editdialogFormVisible: false,
      columns: [{
        text: '分类名称',
        dataIndex: 'cat_name',
        width: ''
      }, {
        text: '是否有效',
        dataIndex: 'cat_deleted',
        width: ''
      }, {
        text: '排序',
        dataIndex: 'cat_level',
        width: ''
      }],
      options: [],
      selectedOptions: [],
      //   验证规则
      fromRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ]
      },
      //   添加部分
      addForm: {
        cat_pid: 0,
        cat_name: '',
        cat_level: 0
      },
      //   编辑部份
      editrow: {
        cat_name: '',
        id: 0
      },
      defaultProps: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      }
    }
  },
  methods: {
    initList () {
      cateList({ type: this.type, pagenum: this.pagenum, pagesize: this.pagesize })
        .then(res => {
          console.log(res)
          this.dataSource = res.data.data.result
          this.totalNum = res.data.data.total
        })
    },
    // 点击添加按钮
    cateBtn () {
      this.addForm.cat_pid = 0
      this.addForm.cat_name = ''
      this.addForm.cat_level = 0
      this.dialogFormVisible = true
      cateList({ type: this.type })
        .then(res => {
          console.log(res)
          this.options = res.data.data
        })
    },
    handleChange (value) {
      console.log(value)
      if (value.length > 0) {
        this.addForm.cat_level = value.length
        this.addForm.cat_pid = value[value.length - 1]
      }
    },
    // 提交添加
    addCate () {
      this.$refs.addRef.validate(isPass => {
        if (isPass) {
          addCateList(this.addForm)
            .then(res => {
              console.log(res)
              if (res.data.meta.status === 201) {
                this.$message.success(res.data.meta.msg)
                this.initList()
              }
            })
        }
      })

      this.dialogFormVisible = false
    },
    // 删除操作
    deleteCategory (cid) {
      console.log(cid)
      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.dataSource.length === 1 && this.totalNum !== 1) {
          this.pagenum -= 1
        }
        // 点击确定执行的操作
        delCate(cid)
          .then(res => {
            if (res.data.meta.status === 200) {
              this.$message.success(res.data.meta.msg)
              this.initList()
            } else {
              this.$message.error(res.data.meta.msg)
            }
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 编辑操作
    editCategory (cid) {
      console.log(cid)
      idSearch(cid)
        .then(res => {
          console.log(res)
          if (res.data.meta.status === 200) {
            this.editrow.id = cid
            this.editrow.cat_name = res.data.data.cat_name
          }
        })
      this.editdialogFormVisible = true
    },
    uploadEdit () {
      uploadEditKind(this.editrow.id, this.editrow.cat_name)
        .then(res => {
          console.log(res)
          if (res.data.meta.status === 200) {
            this.$message.success(res.data.meta.msg)
            this.initList()
          }
        })
      this.editdialogFormVisible = false
    },
    // 每页最大行数
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pagesize = val
      // 赋值完每页条数后重新发请求
      this.initList()
    },
    // 当前页码
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.pagenum = val
      // 复制完当前页之后重新发请求
      this.initList()
    }
  }
}

</script>
